<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <link th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet"/>
    <script th:src="@{https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js}"></script>
    <script th:src="@{https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
    <link th:href="@{/css/site.css}" rel="stylesheet"/>

</head>
<body>
<div class="wrapper fadeInDown">
    <div id="formContent">
        <!-- Tabs Titles -->

        <!-- Icon -->
        <div class="fadeIn first">
            <img th:src="@{/images/Login-Icon.png}">
        </div>

        <!-- Login Form -->
        <form>
            <input type="text" id="name" class="fadeIn second" name="name" placeholder="请输入用户名">
            <input type="password" id="pwd" class="fadeIn third" name="pwd" placeholder="请输入密码">
            <input type="button" id="btn" class="fadeIn fourth" value="登 录">
            <p id="msg" style="height: 30px;color: red;"></p>
        </form>

        <!-- Remind Passowrd -->
        <div id="formFooter">
            <a class="underlineHover" href="#">忘记密码?</a>
        </div>

    </div>
</div>

<script>

    $(document).ready(function () {
        $('#btn').click(function (e) {
            var param = {
                "name": $('#name').val(),
                "pwd": $('#pwd').val()
            };
            $.ajax({
                url: "/login",   //请求的路径
                data: param,    //传给后台的数据（一般使用json格式）
                type: "post",    //post请求
                dataType: "text",    //后台返回数据的类型
                success: function (data) {     //data为后台返回的结果
                    //alert(data);
                    if (data == '0') {
                        $('#msg').html("用户名不存在");
                    } else if (data == '1') {
                        $('#msg').html("密码错误");
                    } else {
                        window.location = data;  //跳转到初始请求url
                    }
                }
            });
        });
    });
</script>

</body>
</html>